<template>
  <!----按钮大小配置-->
  <button
    @click.stop="btnOnClick"
    class="text-sm dark:bg-zinc-900 text-center duration-150 flex justify-center items-center"
    :class="[
      typeMenu[type],
      sizeMenu[sizeKey].button,
      { 'active:scale-105': isAnimation }
    ]"
  >
    <!---是否需要加载-->
    <My-svg-icon
      v-if="isLoading"
      name="loading"
      class="animate-spin w-2 h-2 mr-1"
    >
    </My-svg-icon>
    <!---按钮icon配置-->
    <My-svg-icon
      v-if="icon"
      :name="icon"
      class="m-aotu"
      :class="sizeMenu[sizeKey].icon"
      :color="iconColor"
      :fillClass="iconClass"
    ></My-svg-icon>
    <!----文字按钮-->
    <slot v-else></slot>
  </button>
</template>
<script>
//button类型
const typeMenu = {
  primary: 'text-white bg-blue-300 hover:bg-blue-600 active:bg-blue-400',
  main: 'text-white bg-teal-500 hover:bg-teal-600 active:bg-teal-400',
  info: 'text-blue-700 bg-blue-100 hover:bg-blue-200 active:bg-blue-50'
}
//button大小 区分icon-button和text-button
const sizeMenu = {
  default: {
    button: 'w-8 h-4 text-base',
    icon: ''
  },
  small: {
    button: 'w-7 h-3 text-base',
    icon: ''
  },
  'icon-default': {
    button: 'w-4 h-4 ',
    icon: 'w-1.5 h-1.5'
  },
  'icon-small': {
    button: 'w-3 h-3 ',
    icon: 'w-1.2 h-1.2'
  }
}
const EMIT_EVENT = {
  CLICK: 'click'
}
</script>
<script setup>
import { computed, defineProps, defineEmits } from 'vue'
//button组件需要接收的属性有:icon icon颜色 icon类名 type size
const props = defineProps({
  icon: String,
  iconColor: String,
  iconClass: String,
  type: {
    type: String,
    default: 'main'
  },
  size: {
    type: String,
    default: 'default'
  },
  isAnimation: {
    type: Boolean,
    default: true
  },
  isLoading: {
    type: Boolean,
    default: false
  }
})
//手动计算props中的属性达到text-button和icon-button的效果
const sizeKey = computed(() => {
  return props.icon ? 'icon-' + props.size : props.size
})
//处理btn的点击事件
const emits = defineEmits([EMIT_EVENT.CLICK])
const btnOnClick = () => {
  if (props.isLoading) return
  emits(EMIT_EVENT.CLICK)
}
</script>

<style lang="scss" scoped></style>
